<template>
	<main class="home">
		<kui-header :title="`Home`">
			<span slot="header-left">logo</span>
			<span slot="header-right"></span>
		</kui-header>
		
		<kui-scroll :api="api" :disabled="load.state.disabled">
			<!--load.data.lists-->
			<div class="list">
				<ul>
					<li class="item" v-for="(item,index) in load.data.lists" :key="item.id">
						<router-link :to="`/home/details/${item.id}`">
							<div>{{ index+1 }}:{{ item.title }}</div>
							<div>{{ item.create_at }}</div>
						</router-link>
					</li>
				</ul>
			</div>
			<template slot="load-down">
				<div class="kui-scroll-desc" v-if="load.state.hasMore">
					数据加载中...
				</div>
				<div class="kui-scroll-desc" v-else-if="load.data.lists.length === 0">
					暂无数据
				</div>
				<div class="kui-scroll-desc" v-else-if="!load.state.hasMore && load.data.lists.length > 0">
					暂无更多数据...
				</div>
			</template>
		</kui-scroll>
	
	
	</main>
</template>

<script>
	import {scrollMixin, scrollEndHook, scrollNoHasListData} from '@components/kui-scroll/index';
	export default {
		name: 'home',
		mixins: [scrollMixin()],
		components: {
		},
		data (){
			return {
				ListData:'',
			}
		},
		methods:{
			api() {
				//const page = this.load.params.page++;
				return this.$axios.get('/api/v1/topics', {
					params: {
						tab:'ask',
						page: this.load.params.page++,
					}
				}).then((res) => {
					const { data: resultData } = res;
					if (scrollNoHasListData.call(this, {resultData, listKey: 'data'})) {
						scrollEndHook.call(this);
					} else {
						if(resultData.data.length < 10) scrollEndHook.call(this);
						this.load.data.lists = this.load.data.lists.concat(resultData.data);
					}
				}).catch(() => {
					return scrollEndHook.call(this);
				});
				
			},
		},
		mounted() {
		}
	}
</script>
<style scoped lang="scss">
	.list{
		padding: 10px;
	}
	.item{
		padding: 10px;
		border: 1px solid #ccc;
		margin-top: 5px;
	}
	.kui-scroll-desc{
		padding: 10px;
		text-align: center;
	}
</style>
